import cx from 'classnames';
import qs from 'qs';
import React, { PureComponent } from 'react';
import { withRouter, Redirect } from 'react-router-dom';
import Anchor from 'app/components/Anchor';
import { Notification } from 'app/components/Notifications';
import Space from 'app/components/Space';
import settings from 'app/config/settings';
import controller from 'app/lib/controller';
import i18n from 'app/lib/i18n';
import log from 'app/lib/log';
import * as user from 'app/lib/user';
import store from 'app/store';
import styles from './index.styl';

class Login extends PureComponent {
    static propTypes = {
      ...withRouter.propTypes
    };

    state = this.getDefaultState();

    actions = {
      showAlertMessage: (msg) => {
        this.setState({ alertMessage: msg });
      },
      clearAlertMessage: () => {
        this.setState({ alertMessage: '' });
      },
      handleSignIn: (event) => {
        event.preventDefault();

        this.setState({
          alertMessage: '',
          authenticating: true,
          redirectToReferrer: false
        });

        const name = this.fields.name.value;
        const password = this.fields.password.value;

        user.signin({ name, password })
          .then(({ authenticated }) => {
            if (!authenticated) {
              this.setState({
                alertMessage: i18n._('Authentication failed.'),
                authenticating: false,
                redirectToReferrer: false
              });
              return;
            }

            log.debug('Create and establish a WebSocket connection');

            const token = store.get('session.token');
            const host = '';
            const options = {
              query: 'token=' + token
            };
            controller.connect(host, options, () => {
              // @see "src/web/index.jsx"
              this.setState({
                alertMessage: '',
                authenticating: false,
                redirectToReferrer: true
              });
            });
          });
      }
    };

    fields = {
      name: null,
      password: null
    };

    getDefaultState() {
      return {
        alertMessage: '',
        authenticating: false,
        redirectToReferrer: false
      };
    }

    render() {
      const { from } = this.props.location.state || { from: { pathname: '/' } };
      const state = { ...this.state };
      const actions = { ...this.actions };
      const { alertMessage, authenticating } = state;
      const forgotPasswordLink = 'https://cnc.js.org/docs/faq/#forgot-your-password';

      if (state.redirectToReferrer) {
        const query = qs.parse(window.location.search, { ignoreQueryPrefix: true });
        if (query && query.continue) {
          log.debug(`Navigate to "${query.continue}"`);

          window.location = query.continue;

          return null;
        }

        log.debug(`Redirect from "/login" to "${from.pathname}"`);

        return (
          <Redirect to={from} />
        );
      }

      return (
        <div className={styles.container}>
          {alertMessage && (
            <Notification
              style={{ marginBottom: 10 }}
              type="error"
              onDismiss={actions.clearAlertMessage}
            >
              <div><strong>{i18n._('Error')}</strong></div>
              <div>{alertMessage}</div>
            </Notification>
          )}
          <div className={styles.login}>
            <div className={styles.logo}>
              <img src="images/logo-square-256x256.png" alt="" />
            </div>
            <div className={styles.title}>
              {i18n._('Sign in to {{name}}', { name: settings.productName })}
            </div>
            <form className={styles.form}>
              <div className="form-group">
                <input
                  ref={node => {
                    this.fields.name = node;
                  }}
                  type="text"
                  className="form-control"
                  placeholder={i18n._('Username')}
                />
              </div>
              <div className="form-group">
                <input
                  ref={node => {
                    this.fields.password = node;
                  }}
                  type="password"
                  className="form-control"
                  placeholder={i18n._('Password')}
                />
              </div>
              <div className="form-group">
                <button
                  type="button"
                  className="btn btn-block btn-primary"
                  onClick={this.actions.handleSignIn}
                >
                  <i
                    className={cx(
                      'fa',
                      'fa-fw',
                      { 'fa-spin': authenticating },
                      { 'fa-circle-o-notch': authenticating },
                      { 'fa-sign-in': !authenticating }
                    )}
                  />
                  <Space width="8" />
                  {i18n._('Sign In')}
                </button>
              </div>
              <p>
                <Anchor href={forgotPasswordLink}>
                  {i18n._('Forgot your password?')}
                </Anchor>
              </p>
            </form>
          </div>
        </div>
      );
    }
}

export default withRouter(Login);
